<script>
import '../flow-style.css';
import FlowSupport from '../FlowSupport.js';
import FlowAndG6 from '../typs/flowAndG6.js';
import {ConfigProvider} from 'ant-design-vue';
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
import {createProps} from '@/utils';

export default {
  name: "HFlowEditor",
  components: {
    ConfigProvider
  },
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    globalProperties: createProps(Object),
    fieldComponentRegistry: createProps(Object),
    editable: createProps(Boolean, true),
    history: {
      type: Boolean,
      default: false
    },
    userTaskConfig: {
      type: Object,
      default: () => undefined
    },
    userConfig: {
      type: Object,
      default: () => undefined
    },
    fieldGroups: {
      type: Array,
      default: () => []
    },
    taskViewAndAuthConfig: {
      type: [Object, Function],
      default: undefined,
    },
    value: {
      type: String,
      default: undefined
    },
    request: {
      type: Object,
      default: () => ({
        baseURL: '/',
        headers: {},
      }),
    }
  },
  render() {
    let h = this.$createElement;
    this.$nextTick(() => {
      if (!this.rendered) {
        FlowAndG6.createFlowModel(this);
        this.rendered = true;
      }
    });
    return this.createContainer(h);
  },
  data() {
    return {
      zhCN,
      ...FlowAndG6.data()
    };
  },
  mounted() {
    FlowSupport.register();
  },
  methods: {
    createContainer(h) {
      return h('div', { class: 'h-flow-container-wrapper', style: {width: '100%', height: "100%", position: 'relative'}}, [h('div', {
        ref: 'flowContainer',
        class: ['h-flow-container'],
      }), this.createMiniMapContainer(h), this.createToolBarContainer(h)]);
    },
    createMiniMapContainer(h) {
      return h('div', {
        ref: 'flowMiniMap',
        class: ['h-flow-mini-map-container', {'h-flow-mini-map-container-hidden': !this.showMiniMap}]
      }, [h('div', {
        class: 'h-flow-mini-map-button',
        on: {click: () => this.showMiniMap = !this.showMiniMap}
      }, [h('a', [this.showMiniMap ? '收起' : '展开'])])]);
    },
    createToolBarContainer(h) {
      return h('div', {
        class: 'h-flow-toolbar-container', ref: 'toolBarContainer', style: {
          right: this.showMiniMap ? '265px' : '9px',
          top: this.showMiniMap ? '10px' : '55px',
        }
      });
    },
  },
  watch: {
    value() {
      this.$nextTick(() => FlowAndG6.reRenderFlowModel(this));
    },
  }
};
</script>
